<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Jquery mobile</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">

<!-- Extra Codiqa features -->
<link rel="stylesheet" href="css/base.css">

<!-- jQuery and jQuery Mobile -->
<script src="js/libs/jquery-2.0.3.min.js"></script>
<script src="js/extend.js"></script>
<script src="js/base.js"></script>
<script src="js/libs/jquery.mobile-1.3.1.min.js"></script>

<!-- extend -->
<script>
var extraJS = [];
</script>
</head>

<body>

<!-- Start of first page -->
<div data-role="page" id="foo" >
	<div data-role="header"  data-position="fixed" data-theme="a">
		<h1>Foo</h1>
		<a href="./index.html" data-icon="back">back</a>
		<a href="./about.html" data-icon="check">Save</a>
	</div>
	<!-- /header -->
	
	<div role="main" class="ui-content">
		<ul data-role="listview" style="margin-top: 0;"  data-dividertheme="d">
		   <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>
		   <li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>
		   <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>
			<li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>
		   <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>
		</ul>
		<p>View internal page called <a href="#bar">bar</a></p>
	</div>
	<!-- /content -->
	
	<div data-role="footer"  data-position="fixed" data-theme="a" class="footer"   data-id="main">
		 <div data-role="navbar">
			<ul>
			 <li><a href="about.html"  data-transition="flip"  class="">Royals</a></li>
			 <li><a href="index.html">Leaders</a></li>
		  </ul>
	   </div><!-- /navbar -->

	</div>
	<!-- /footer --> 
</div>
<!-- /page --> 
<div  data-role="page" id="page2"> 
test
</div>

<!-- Start of second page -->
<div data-role="page" id="bar">
	<div data-role="header"  data-position="fixed">
		<h1>Bar</h1>
	</div>
	<!-- /header -->
	
	<div role="main" class="ui-content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#foo">Back to foo</a></p>
	</div>
	<!-- /content -->
	
	<div data-role="footer"  data-position="fixed" data-theme="a" id="myfooter"  data-id="main">
		 <div data-role="navbar">
			<ul>
			 <li><a href="about.html" class="ui-btn-active">Royals</a></li><!-- data-transition="flip" data-rel="dialog" -->
			 <li><a href="#nav2">Leaders</a></li>
		  </ul>
	   </div><!-- /navbar -->

	</div>
	<!-- /footer --> 
</div>
<!-- /page -->

<script src="js/libs/require/require.js" data-main="js/main.js"></script>
</body>
</html>
